<template>
    <div class="floor2">

        <div class="floor2-left blue">
            <div>文章专栏</div>
        </div>

        <div class="floor2-right">

            <el-row :gutter="32">
                <el-col :span="8" v-for="(item,index) in article" :key="item.articleTypeId" v-if="index < 3">
                    <div class="floor2-right-head">
                        <div>
                            <img :src="PIC_URL + '/experience/images/' + iconArr[index]" style="width: 24px;height: 24px;">
                            <span class="floor2-right-title">{{ item.articleTypeName | getName }}</span>
                        </div>
                        <div class="more" @click="onArticleGroup({articleType:item.articleTypeId,title:item.articleTypeName})">查看更多>></div>
                    </div>

                    <div class="floor2-right-com" v-if="item.list && item.list.length != 0">
                        <div class="floor2-right-cell" v-for="val in item.list" :key="val.articleId" @click="onArticle(val)">
                            <div class="floor2-right-cell-title">{{ val.articleTitle }}</div>
                            <div>{{ val.publishTime | formatDate('MM-DD') }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div style="padding-top: 13px;border-top: 1px solid #DEDEDE;margin-top: 12px;" v-if="article && article.length > 2"></div>

            <el-row :gutter="32">
                <el-col :span="8" v-for="(item,index) in article" :key="item.articleTypeId" v-if="index > 2">
                    <div class="floor2-right-head">
                        <div>
                            <img :src="PIC_URL + '/experience/images/' + iconArr[index]" style="width: 24px;height: 24px;">
                            <span class="floor2-right-title">{{ item.articleTypeName | getName }}</span>
                        </div>
                        <div class="more" @click="onArticleGroup({articleType:item.articleTypeId,title:item.articleTypeName})">查看更多>></div>
                    </div>

                    <div class="floor2-right-com" v-if="item.list && item.list.length != 0">
                        <div class="floor2-right-cell" v-for="val in item.list" :key="val.articleId" @click="onArticle(val)">
                            <div class="floor2-right-cell-title">{{ val.articleTitle }}</div>
                            <div>{{ val.publishTime | formatDate('MM-DD') }}</div>
                        </div>
                    </div>
                </el-col>
            </el-row>

        </div>

    </div>
</template>

<script>
//文章专栏

import mixin from "../utils/mixin";

export default {
    name: "articleColumn",
    mixins: [mixin],
    props: {
        article: {
            type: Array,
            default: ()=> []
        }
    },
    data(){
        return {
            iconArr: ['icon10.png','icon19.png','icon20.png','icon21.png','icon11.png','icon12.png','icon10.png'],
        }
    }
}
</script>

<style scoped lang="scss">
@import "../style/style";
</style>